<template>
	<div class="app-containers">
		<el-dialog title="流程设计" :close-on-click-modal="false" v-model="state.visible" width="100%" style="height:100%;" @close="refreshEmit">
			<BpmnActions :processDefId="state.id"></BpmnActions>
			<Modeler style="height:800px;" :processDefId="state.id"/>
			<Panel></Panel>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="bpmnDesigner">
import { defineAsyncComponent, reactive} from 'vue';
// 引入组件
const Modeler = defineAsyncComponent(() => import('./modeler'));
const Panel = defineAsyncComponent(() => import('./panel'));
const BpmnActions = defineAsyncComponent(() => import('./bpmn-actions'));
// 定义父组件传过来的值
/* const props = defineProps({
	modelId: {
		type: String,
		default: () => '',
	},
}); */
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refreshDataList']);
const state = reactive({
	id: '',
	visible: false,
	creatFlag: false
});
const refreshEmit = () => {
	closeDialog();
	emit('refreshDataList');
};
// 关闭弹窗
const closeDialog = () => {
	state.visible = false;
};
const openDialog = (id: string, creatFlag: boolean) => {
	state.id=id
	state.visible = true
	state.creatFlag = creatFlag
};
// 暴露变量
defineExpose({
	openDialog
});
</script>
<style scoped lang="scss">
.app-containers {
  height: 100%;
}
</style>